<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--ctxPath--%>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<%--项目路径 --%>
<c:set var="path" value="${ctxPath}" />
<%--静态文件目录 --%>
<c:set var="staticPath" value="${ctxPath}" />
<!DOCTYPE html>
<html>
<head>
    <title>灯塔</title>
    <meta name="keywords" content="灯塔博客">
    <meta name="description" content="灯塔博客">
    <%--    <link href="${staticPath }/assets/css/style.css" rel="stylesheet" type="text/css">--%>
    <style>
        html, body, ul, li {
            margin: 0;
            padding: 0;
            border: none;
        }

        body {
            /*background: #f2f2f2;*/
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
            font-size: 14px;
            color: #FFF;
        }

        body * {
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            cursor: pointer;
            color: #3a76bf;
        }

        .clearfix {
            display: block;
        }
        /*头部也就是页面最上面的CSS*/
        .header {
            width: 100%;
            height: 75px;
            background: #f8f8fa;
            box-shadow: 0 1px 3px #ddd;
            border: 1px #fff solid;
            -webkit-box-shadow: 0 1px 3px #ddd;
            border-left: none;
            border-right: none;
            position: relative;
            z-index: 999;
        }

        .header_box {
            width: 1100px;
            margin: 0 auto;
            height: 100%;
            line-height: 75px;
        }
        .header_logo {
            width: 20%;
            float: left;
            height: 100%;
            text-align: center;
            vertical-align: middle;
        }


        .header_nav {
            width: 80%;
            float: left;
            height: 100%;
            line-height: 75px;
            vertical-align: middle;
        }
        /*ul {*/
        /*    display: flex;*/
        /*    list-style-type: none; !* 移除默认的列表样式 *!*/
        /*    padding: 0; !* 移除默认的内边距 *!*/
        /*}*/

        /*li {*/
        /*    margin-right: 10px; !* 可选：为列表项之间添加间距 *!*/
        /*}*/
        .header_nav > ul {
            display: flex;
            padding-left: 20px;
            float: left;
            list-style-type: none; /* 移除默认的列表样式 */
        }

        .header_nav > ul li {
            display: inline-block; /* 使列表项水平排列 */
            list-style: none;
            text-align: center;
            line-height: 30px;
            padding: 10px;
            height: 30px;
            margin: 0 10px;
            float: left;
        }
        /*全部部分*/
        .article_box {
            width: 1100px;
            /*width: 80%;*/
            margin: 20px auto;
        }


        /*首页文章部分*/
        .article_box_one {
            width: 100%;
            margin-bottom: 24px;
        }

        .index_article_title {
            padding: 10px 20px 30px 20px;
            background: #f8f8fa;
            box-shadow: 0 1px 3px #ddd;
            border: 1px #fff solid;
            -webkit-box-shadow: 0 1px 3px #ddd;
            font-size: 16px;
        }

        .index_article_title h3 {
            font-weight: normal;
            display: block;
            width: 100%;
            float: left;
            color: #333;
        }

        .index_article_title a {
            display: block;
            width: 10%;
            float: right;
            font-size: 14px;
            text-align: right;
            color: #999;
            padding-top: 6px;
        }

        .index_article_title a:hover {
            color: #3a76bf;
        }


        .index_article {
            width: 100%;
            background: #f8f8fa;
            box-shadow: 0 1px 3px #ddd;
            border: 1px #fff solid;
            -webkit-box-shadow: 0 1px 3px #ddd;
            border-top: none;
        }

        .index_article .article_list {
            width: 100%;
            display: block;
            border-bottom: 1px #efefef solid;
            /*padding: 20px 20px 20px 20px;*/
        }

        .index_article .article_list:last-child {
            border-bottom: none;
        }

        .index_article .article_list:nth-child(1) {
            border-top: 1px #efefef solid;
        }

        .index_article .article_list .article_list_img {
            display: inline-block;
            font-size: 0;
            float: left;
            margin-left: -240px;
            max-height: 144px;
            overflow: hidden;
        }

        .index_article .article_list .article_list_img img {
            width: 226px;
            vertical-align: middle;
        }

        .index_article .article_list h3 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #3a76bf;
            display: block;
            font-size: 16px;
            padding: 0 20px 10px 20px;
            font-weight: bold;
            line-height: 30px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .index_article .article_list p {
            margin: 0 20px 10px 20px;
            font-size: 13px;
            color: #666;
            display: inline-block;
            /*height: 70px;*/
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .index_article .article_list .article_list_link {
            padding: 0 20px;
            font-size: 16px;
        }

        /*文章点击率*/
        .article_list_count {
            color: #666;
            display: inline-block;
            text-indent: .5em;
            line-height: 18px;
        }


        /*博客文章详情*/
        .article_content_box {
            color: #666;
            font-size: 14px;
            padding: 10px;
            width: 100%;
            margin-bottom: 24px;
            background: #f8f8fa;
            box-shadow: 0 1px 3px #ddd;
            border: 1px #fff solid;
            -webkit-box-shadow: 0 1px 3px #ddd;
            border-top: none;
        }
        .article_title {
            color: #3a76bf;
            font-weight: normal;
            font-size: 22px;
            margin-top: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .article_info{
            margin-top: 10px;
            text-align: center;
            vertical-align: middle;
            color: #000000;
        }



        .article_content {
            margin: 10px 100px 20px 100px;
            line-height: 30px;
            background-color: #eee;
            color: #666;
            padding: 10px 10px;
            color: #000000;
            text-indent: 2em;
            font-size: 14px;
        }
        .index_news_list_DXAWc {
            position: relative;
            width: 100%;
        }

        .index_news_list_DXAWc .index_news_list_p_X8PK9 {
            /*height: 2.714286rem;*/
            /*line-height: 2.714286rem;*/
            overflow: hidden;
            width: 100%;
        }
        .index_news_list_DXAWc .index_news_list_p_X8PK9 a {
            color: #212223;
            font-family: PingFangSC-Regular,PingFang SC;
            font-size: 1.142857rem;
            font-weight: 400;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="header_box">
        <div class="header_logo">
            <img src="${staticPath }/assets/img/logo.png"/> </img>
        </div>
        <div class="header_nav">
            <ul>
                <li><a href="#"><h2>Java Web开发</h2></a></li>
                <li><a href="#"><h2>Java程序设计</h2></a></li>
                <li><a href="#"><h2>人工智能</h2></a></li>
                <li><a href="login.jsp"><h2>博客后台登录</h2></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="article_box clearfix">
    <div class="article_content_box clearfi">
        <div class="article_title">${ article.title }</div>
        <div style="margin-top: 10px"></div>
        <div class="article_info">
            <span><strong>作者：</strong>&nbsp;&nbsp;
                <c:forEach items="${userList}" var="user">
                    <c:if test="${article.userId eq user.id}">
                        <td>${user.name}</td>
                    </c:if>
                </c:forEach>
            </span> &nbsp;&nbsp;
            <span><strong>博客分类：</strong>&nbsp;&nbsp;
                <c:forEach items="${categoryList}" var="category">
                    <c:if test="${article.categoryId eq category.id}">
                        <td>${category.name}</td>
                    </c:if>
                </c:forEach>
            </span>&nbsp;&nbsp;
            <span><strong>发布时间：</strong>&nbsp;${article.createdTime}</span>&nbsp;&nbsp;
            <span><strong>阅读次数：</strong> ${ article.views }</span>
        </div>
        <div class="article_content">
            ${ article.content }
        </div>
    </div>
</div>
</body>
</html>
